<template>
  <div class="form-pay">
    <div class="close">
      <u-icon @click="close" name="close" color="#999999" size="18" />
    </div>
    <div class="flex row">
      <div class="label">到账时间</div>
      <div class="gray">对方点击放款即到账</div>
    </div>
    <div>
      <div class="label">{{ payTtile }}</div>
      <div class="flex amount">
        <div>￥</div>
        <input v-model="form.price" type="number" />
      </div>
    </div>
    <div class="tips">
      <div class="gray">
        担保金额￥{{ fmtPrice }},支持收部分/<span
          @click="allPay"
          style="color: #4ec360"
          >全款</span
        >
      </div>
    </div>
    <div class="btn">
      <u-button
        @click="submit"
        background="#FF5D19"
        :disabled="isDisable"
        loadingMode="circle"
        :loading="isDisable"
        :text="btnText"
        type="success"
      >
      </u-button>
    </div>
  </div>
</template>

<script>
import api from "@/api"
export default {
  props: {
    payInfo: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      form: { price: "" },
      btnText: "",
      payTtile: "",
      isDisable: false,
    }
  },
  computed: {
    row() {
      return this.payInfo.row
    },
    fmtPrice() {
      return this.form.price && Number(this.form.price).toFixed(2)
    },
  },
  watch: {
    payInfo: {
      handler(data) {
        this.changeBtnText(data?.btn)
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    allPay() {
      this.form.price = this.row.price
    },
    changeBtnText(btn) {
      this.btnText = btn?.label
      this.payTtile = btn?.label === "申请退款" ? "退款金额" : "收款金额"
    },
    submit() {
      const { btn, row } = this.payInfo
      switch (btn.label) {
        case "申请退款":
          this.refound(row)
          break
        case "申请收款":
          this.recevie(row)
          break
      }
    },
    refound(row) {
      if (!this.form.price) {
        this.$toast("请输入退款金额")
        return
      }
      let data = {
        guaranteeOrderId: row.id,
        refundPrice: parseInt(this.form.price) * 100,
      }
      this.isDisable = true
      api.user.refund(data).then((res) => {
        if (res.code === 200) {
          this.isDisable = false
          uni.showModal({
            title: "温馨提示",
            content: `提交成功，请联系对方点击确认`,
            confirmText: "确认",
            showCancel: false,
            success: (res) => {
              if (res.confirm) {
                this.close()
              }
            },
          })
        } else {
          this.isDisable = false
        }
      })
    },
    recevie(row) {
      if (!this.form.price) {
        this.$toast("请输入收款金额")
        return
      }
      let data = {
        guaranteeOrderId: row.id,
        price: parseFloat(this.form.price) * 100,
      }
      api.user.receive(data).then((res) => {
        if (res.code === 200) {
          this.isDisable = false
          uni.showModal({
            title: "温馨提示",
            content: `提交成功，请联系对方点击确认`,
            confirmText: "确认",
            showCancel: false,
            success: (res) => {
              if (res.confirm) {
                this.close()
              }
            },
          })
        } else {
          this.isDisable = false
        }
      })
    },
    close() {
      this.$emit("close", false)
    },
    resetForm() {
      this.form.price = ""
    },
  },
}
</script>

<style lang="scss" scoped>
.form-pay {
  padding: 30rpx;
  .close {
    margin-bottom: 30rpx;
    display: flex;
    justify-content: flex-end;
  }

  .label {
    font-size: 28rpx;
    color: #3d3d3d;
    font-weight: 500;
    margin-right: 20rpx;
  }

  .flex {
    display: flex;
  }

  .row {
    margin-bottom: 30rpx;
  }

  .tips {
    margin: 15rpx 0 80rpx;
  }

  .amount {
    padding: 20rpx;
    border-bottom: 1px solid #e4e4e4;
  }

  .gray {
    color: #d4d4d4;
  }

  .btn {
    /deep/.u-button {
      height: 96rpx;
      line-height: 96rpx;
      border-radius: 100rpx;
      background: #23ac39;
      font-size: 32rpx;
      text-align: center;
      font-weight: 500;
      color: #fff;
      border: none;
    }
  }
}
</style>
